<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>搜索</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background: rgb(246, 246, 246);
            min-height: 100%;
        }
        .inp{
            width: 100%;
            background: #fff;
            padding-top: 13rem;
            padding-bottom: 22rem;
        }
        .search{
            width: 340rem;
            margin-left: 15.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1rem solid #000;
            border-radius: 4px;
        }
        .search input{
            width: 300rem;
            height: 41.5rem;
            font-size: 16.6rem;
            padding:0 13rem;
            border: none;
            background: none;
            outline: none;
        }
        .search img{
            width: 22rem;
            height: 27rem;
            padding-right: 15.5rem;
        }
        .list{
            padding: 0 15.5rem 18rem 15.5rem;
            background: #fff;
            border-bottom: 10rem solid rgb(246, 246, 246);
        }
        .list h6{
            line-height: 30rem;
            font-size: 18rem;
        }
        .list img{
            width: 344rem;
            height: 117rem;
            border-radius: 2px;
        }
        .list-content{
            padding-top: 5rem;
            line-height: 25rem;
            font-size: 13rem;
            color: #5c5c5c;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .blist{
            padding: 0 15.5rem 18rem 15.5rem;
            background: #fff;
        }
        .blist h6{
            line-height: 30rem;
            font-size: 18rem;
        }
        .blist img{
            width: 110rem;
            height: 110rem;
            border-radius: 2px;
        }
        .blist-content{
            padding-left: 15rem;
            line-height: 25rem;
            font-size: 13rem;
            color: #5c5c5c;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        .site{
            padding-top: 5rem;
            display: flex;
            font-size: 13rem;
        }
        .url{
            color: #949494;
        }
        .site img{
            margin-left: 8.5rem;
            margin-right: 10rem;
            width: 15.5rem;
            height: 15rem;
        }
        .logo{
            color: #8CA9EC;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div  id="app">
        <div class="wrap ">
            <div class="inp">
                <div class="search">
                    <input type="text" placeholder="搜索或输入网址地址" @keyup.enter="onSubmit" v-model='search'>
                    <img src="__CDN__/assets/images/放大镜.png">
                </div>
            </div>

            <!-- '广告展示方式:0=上中下(上文字.中图片.下文字),1=上左右(上文字.左图片.右文字),2=上下(上文字.下文字)', -->
            <div class="list" v-for='item in lists' @click="ahref(item.url)">
                <h6 >{{item.title}}</h6>
                <img :src="item.img" alt="" v-if="item.img">
                <div class="list-content">{{item.content}}</div>
                <div class="site">
                    <div class="url">www.baidu.com</div>
                    <img src="__CDN__/assets/images/保.png">
                    <div class="logo">广告</div>
                </div>
            </div>

            <!-- <div class="blist" v-for='item in lists' >
                <h6 >{{item.title}}</h6>
                <div style="display: flex;">
                    <img src="../images/banner.jpg" alt="">
                    <div class="blist-content">{{item.content}}</div>
                </div>
                <div class="site">
                    <div class="url">growth.maodou.com</div>
                    <img src="../images/保.png">
                    <div class="logo">广告</div>
                </div>
            </div> -->
        </div>
    </div>
    
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return  {
                search: '',
                lists:[],
                ads:{}
            }
            
        },
        watch: {
            parentPullUpState (curVal, oldVal) {
            this.pullUpState = curVal
            }
        },
        mounted(){
            
        },
        methods:{
            onSubmit() {
                var that = this;
                $.ajax({
                    //请求方式
                    type : "GET",
                    //请求的媒体类型
                    contentType: "application/json;charset=UTF-8",
                    //请求地址
                    url : "https://app.aebrowser.cn/api/v1.ads/search",
                    dataType: 'jsonp',
                    //数据，json字符串
                    data : {
                        keyword:this.search,
                        page:'1'
                    },
                    //请求成功
                    success : function(res) {
                        if(res.code = 1){
                            that.lists = res.data.news
                            that.ads = res.data.ads
                        } 
                    }
                });
            },
            ahref(item){
                console.log(item)
                window.location.href=item
            }
        }
    })
</script>
